var data = [
  {
    Id: 1,
    // img:'<img src="../img/content/content_table_person.png">',
    name: "张三",
    sex: "男",
    Employee_number: "GH000001",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "发起",
  },
  {
    Id: 2,
    name: "李四",
    sex: "女",
    Employee_number: "GH000002",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "未发起",
  },
  {
    Id: 3,
    name: "王五",
    sex: "男",
    Employee_number: "GH000003",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "发起",
  },
  {
    Id: 4,
    name: "赵六",
    sex: "女",
    Employee_number: "GH000004",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "未发起",
  },
  {
    Id: 5,
    name: "韩七",
    sex: "男",
    Employee_number: "GH000005",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "发起",
  },
  {
    Id: 6,
    name: "小张",
    sex: "女",
    Employee_number: "GH000006",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "未发起",
  },
  {
    Id: 7,
    name: "小唐",
    sex: "男",
    Employee_number: "GH000007",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "发起",
  },
  {
    Id: 8,
    name: "小刘",
    sex: "男",
    Employee_number: "GH000008",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "未发起",
  },
  {
    Id: 9,
    name: "小曾",
    sex: "女",
    Employee_number: "GH000009",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "发起",
  },
  {
    Id: 10,
    name: "小胡",
    sex: "男",
    Employee_number: "GH000010",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "未发起",
  },
  {
    Id: 11,
    name: "小李",
    sex: "女",
    Employee_number: "GH000011",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "未发起",
  },
  {
    Id: 12,
    name: "小王",
    sex: "男",
    Employee_number: "GH000012",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "未发起",
  },
  {
    Id: 13,
    name: "小宋",
    sex: "女",
    Employee_number: "GH000013",
    Before_department: "黛西进出口贸易公司 / 研发部",
    After_department: "黛西进出口贸易公司 / 产品部",
    Type: "调岗",
    Date_of_entry: "2021-01-02",
    Date_of_application: "2022-01-02",
    Approval_status: "未发起",
  },
];
//当前的页码
var page = 1;
//每页的条数
var count = 5;
//获取tbody
var oTBody = document.querySelector("tbody");
// console.log(oTBody)
//获取分页容器
var oPagination = document.querySelector(".pagination");
//获取上一页的按钮
var oPrevBtn = document.querySelector(".prev");
//获取下一页的按钮
var oNextBtn = document.querySelector(".next");

//获取搜索的输入框
var oSearchInp = document.querySelector(".searchInp");
// console.log(oSearchInp.value)

//获取搜索按钮
var oSearchBtn = document.querySelector(".searchBtn");
// 封装页面数据的渲染
function render() {
  // 获取搜索框的文字
  var str = oSearchInp.value;
  // 准备空数组存放数据
  var searchArrData = [];
  if (str.trim() == "") {
    searchArrData = data;
  } else {
    // 循环数据
    for (var i = 0; i < data.length; i++) {
      // data的某一条数据包含str的值
      if (
        data[i].name.includes(str) ||
        data[i].Employee_number.includes(str) ||
        data[i].Approval_status == str
      ) {
        // 存入renderArrData空数据中
        searchArrData.push(data[i]);
      }
    }
  }
  // 先清空页面里的data数据
  oTBody.innerHTML = "";
  // 页面初始化渲染数据
  //   console.log(data.slice((page - 1) * count, page * count));
  var renderArr = searchArrData.slice((page - 1) * count, page * count);
  // 循环遍历,渲染数据
  for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement("tr");
    oTr.innerHTML = `
    <td>${renderArr[i].Id}</td>
    <td>
        <img src="../../images/tjy_img/content/content_table_person.png">
        <span  style="color:#134ade;">${renderArr[i].name}</span>
    </td>
    <td>${renderArr[i].Employee_number}</td>
    <td>${renderArr[i].Before_department}</td>
    <td>${renderArr[i].After_department}</td>
    <td>${renderArr[i].Type}</td>
    <td>${renderArr[i].Date_of_entry}</td>
    <td>${renderArr[i].Date_of_application}</td>
    <td>${renderArr[i].Approval_status}</td>
    <td>
        <button class="btn btn-warning edit">修改调动</button>
        <button class="btn btn-warning del">放弃调动</button>
    </td>
    `;
    oTBody.appendChild(oTr);
  }
  // 渲染页码
  var aPageBtn = document.querySelectorAll(".pageBtn");

  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  for (var i = 1; i <= Math.ceil(searchArrData.length / count); i++) {
    var oLi = document.createElement("li");
    oLi.innerHTML = `<a class='pageBtn' href="#">${i}</a>`;
    if (i == page) {
      oLi.classList.add("active");
    }
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
}
// 页面一加载就渲染数据
render();

// 给分页加事件
oPagination.addEventListener("click", changePageFn);
function changePageFn() {
  if (event.target.className == "pageBtn") {
    page = event.target.innerText;
    // 渲染数据
    render();
  }
}

// 上一页的事件
oPrevBtn.addEventListener("click", prevFn);
function prevFn() {
  if (page > 1) {
    page--;
    render();
  }
}
// 下一页的事件
oNextBtn.addEventListener("click", nextFn);
function nextFn() {
  if (page < Math.ceil(data.length / count)) {
    page++;
    render();
  }
}

// 删除某一条记录
oTBody.addEventListener("click", delFn);
function delFn() {
  // 如果className包含del
  if (event.target.className.includes("del")) {
    // 获取当前点击的某一项的id
    var id = event.target.parentNode.parentNode.children[0].innerText;
    var oConfirm = confirm("您确定要删除吗？");
    for (var i = 0; i < data.length; i++) {
      if (data[i].Id == id && oConfirm) {
        data.splice(i, 1);
      }
    }
  }
  render();
  // Phase Two Project
}

// 搜索图片的mouseover事件
oSearchBtn.addEventListener("mouseover", mouseOverFn);
function mouseOverFn() {
  oSearchBtn.style.border = "2px solid #999";
  oSearchBtn.style.borderRadius = "5px";
  oSearchBtn.style.cursor = "pointer";
}
// 搜索图片的mouseout事件
oSearchBtn.addEventListener("mouseout", mouseOutFn);
function mouseOutFn() {
  oSearchBtn.style.border = "";
  oSearchBtn.style.cursor = "";
}
// 搜索图片的点击事件
oSearchBtn.addEventListener("click", searchBtnFn);
function searchBtnFn() {
  page = 1;
  render();
  // 清空输入框的内容
  oSearchInp.value = "";
}

// 模态框保存按钮
var oAddData = document.querySelector(".addSaveBtn");
oAddData.addEventListener("click", openAddData);
function openAddData() {
  var addId = document.querySelector(".addId").value;
  var addName = document.querySelector(".addName").value;
  var addSex = document.querySelector("#addRadio1").checked ? "男" : "女";
  var addEmployee_number = document.querySelector(".addEmployee_number").value;
  var addBefore_department = document.querySelector(
    ".addBefore_department"
  ).value;
  var addAfter_department = document.querySelector(
    ".addAfter_department"
  ).value;
  var addType = document.querySelector(".addType").value;
  var addDate_of_entry = document.querySelector(".addDate_of_entry").value;
  var addDate_of_application = document.querySelector(
    ".addDate_of_application"
  ).value;
  var addApproval_status = document.querySelector(".addApproval_status").value;

  // 将数据插入data中
  data.push({
    Id: addId,
    name: addName,
    sex: addSex,
    Employee_number: addEmployee_number,
    Before_department: addBefore_department,
    After_department: addAfter_department,
    Type: addType,
    Date_of_entry: addDate_of_entry,
    Date_of_application: addDate_of_application,
    Approval_status: addApproval_status,
  });
  // 隐藏关闭模态框
  $("#addModal").modal("hide");
  // 添加后清空数据
  document.getElementById("#formData").reset();
  // 重新加载data
  render();
}

// 模态框修改信息
oTBody.addEventListener("click", openEdit);

function openEdit() {
  // 判断事件来源
  if (event.target.className.includes("edit")) {
    $("#editModal").modal("show");
    // 确认是哪个id的数据
    var id = event.target.parentNode.parentNode.children[0].innerHTML;
    for (var i = 0; i < data.length; i++) {
      if (data[i].Id == id) {
        // 编号
        document.querySelector(".editId").value = data[i].Id;
        // 姓名
        document.querySelector(".editName").value = data[i].name;
        // 性别
        if (data[i].sex == "女") {
          document.querySelector("#editRadio2").checked = true;
        }
        // 员工编号
        document.querySelector(".editEmployee_number").value =
          data[i].Employee_number;
        // 原组织部门
        document.querySelector(".editBefore_department").value =
          data[i].Before_department;
        // 调动后组织部门
        document.querySelector(".editAfter_department").value =
          data[i].After_department;
        // 调动类型
        document.querySelector(".editType").value = data[i].Type;
        // 入职日期
        document.querySelector(".editDate_of_entry").value =
          data[i].Date_of_entry;
        // 申请日期
        document.querySelector(".editDate_of_application").value =
          data[i].Date_of_application;
        // 审批状态
        document.querySelector(".editApproval_status").value =
          data[i].Approval_status;
      }
    }
  }
}
//   修改后点击保存
var oEditSavaBtn = document.querySelector(".editSaveBtn");
oEditSavaBtn.addEventListener("click", editSaveFn);
function editSaveFn() {
  var id = document.querySelector(".editId").value;
  for (var i = 0; i < data.length; i++) {
    if (data[i].Id == id) {
      // 员工姓名
      data[i].name = document.querySelector(".editName").value;
      // 员工性别
      data[i].sex = document.querySelector("#editRadio1").checked ? "男" : "女";
      // 员工编号
      data[i].Employee_number = document.querySelector(
        ".editEmployee_number"
      ).value;
      // 原组织部门
      data[i].Before_department = document.querySelector(
        ".editBefore_department"
      ).value;
      // 调动后组织部门
      data[i].After_department = document.querySelector(
        ".editAfter_department"
      ).value;
      // 调动类型
      data[i].Type = document.querySelector(".editType").value;
      // 入职日期
      data[i].Date_of_entry =
        document.querySelector(".editDate_of_entry").value;
      // 申请日期
      data[i].Date_of_application = document.querySelector(
        ".editDate_of_application"
      ).value;
      // 审批状态
      data[i].Approval_status = document.querySelector(
        ".editApproval_status"
      ).value;
    }
  }
  // 关闭模态框
  $("#editModal").modal("hide");
  // 重新加载数据
  render();
}
